<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner"><img v-for="item in banner" :src="item" alt="" /></div>
			<div class="contact">
				<div class="contact_head" v-for="item in contact_head">
					<p>{{ item.title }}</p>
					<p>{{ item.content }}</p>
				</div>
  				<div class="form">
	  				<form action="/" @submit.prevent="submit" method="post">
	  					<group>
					        <x-input ref="info_1" :show-clear="false" required placeholder="姓名"></x-input>
					  	</group>
					  	<group>
					    	<x-input ref="info_2" :show-clear="false" :type="'number'" is-type="china-mobile" required placeholder="电话"></x-input>
					  	</group>
					  	<group>
					    	<x-textarea ref="info_3" :show-clear="false" autosize :max="280" placeholder="对我们说的:"></x-textarea>
					  	</group>
					  	<x-button type="default" class="btn">提交</x-button>
					</form>
						
	   				<div v-transfer-dom>	
						<x-dialog v-model="bool" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
					        <p style="color:#fff;text-align:center;" @click="bool = false">
					          	<span style="font-size:0.25rem;">恭喜您!提交成功!</span>
					          	<br>
					          	<br>
					          	<x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
					        </p>
				      </x-dialog>
				    </div>
				    
				    <div v-transfer-dom>	
						<x-dialog v-model="bool2" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
					        <p style="color:#fff;text-align:center;" @click="bool2 = false">
					          	<span style="font-size:0.25rem;">对不起!您的输入有误!</span>
					          	<br>
					          	<br>
					          	<x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
					        </p>
				      	</x-dialog>
				    </div>
  				</div>
		        <swiper auto height="2.13rem" class="carsouel" dots-position="center">
			      	<swiper-item v-for="item in carousel"><img :src="item.src" alt="" /></swiper-item>
			    </swiper>
			</div>
		</section>
		<footer-v></footer-v>
	</div> 
</template>

<script>
import header from '../public/header'
import footer from '../public/footer'
	
import banner from '../../assets/banner_2.jpg'
import picture_09 from '../../assets/picture_9.jpg'
import carousel from '../../assets/carousel.png'
import { XInput, Group, XTextarea, XButton, XDialog, Swiper, SwiperItem, TransferDomDirective as TransferDom } from 'vux'
export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	XInput, Group, XTextarea, XButton, XDialog, Swiper, SwiperItem
  }, 
  directives: {
    TransferDom
  },
  data () {
    return {
    	banner : [banner],
    	contact_head : [
    		{
    			title : '问题和建议',
    			content : '创业维艰，创业资金有限。为企业、品牌创造商业价值'
    		},
    	],
    	bool : false,
    	bool2 : false,
    	carousel : [
    		{src : carousel},
    		{src : carousel}
    	]
    }	
  },
  methods : {
  	submit : function (event){
  		
  		//找到input 判断是否为空~
  		var info = this.$refs.info_1.$el.getElementsByClassName('weui-input')[0];
  		var info2 = this.$refs.info_2.$el.getElementsByClassName('weui-input')[0];
  		var info3 = this.$refs.info_3.$el.getElementsByClassName('weui-textarea')[0];	
  		
  		if(this.$refs.info_1.$el.className == 'vux-x-input weui-cell' && this.$refs.info_2.$el.className == 'vux-x-input weui-cell' && this.$refs.info_3.$el.className == 'weui-cell vux-x-textarea' && info.value != '' && info2.value != '' && info3.value != ''){
  			
  			this.bool = !this.bool;
  			
  		}else{
  			this.bool2 = !this.bool2;
  		}
  	}
  }
}

</script>

<style type="text/css">
	/* contact.style */
	
	.banner img{
		width:100%; height: 1.77rem;
	}
	.contact{
		padding: 0.3rem 0.2rem;
	}
	.contact_head p:nth-of-type(1){
		font-size: 0.26rem; text-align: center; line-height: 0.45rem;
	}
	.contact_head p:nth-of-type(2){
		color:#696969;text-align: center; margin-bottom: 0.35rem;
	}
	
	.form{
		padding: 0 0.1rem; 
	}
	.weui-cell{
		padding: 0rem 0.1rem !important;
	}
	.form input{
		border: 0.01rem solid #dcdcdc; color: #666; width: 100%; height: 0.4rem; border-radius: 0.04rem; text-indent: 1em;
	}
	.form textarea{
		border: 0.01rem solid #dcdcdc; padding-top: 0.1rem; height: 1rem !important; color: #666; width: 100%; border-radius: 0.04rem; text-indent: 1em;
	}
	.form .btn{
		width: 1.5rem; height: 0.4rem; margin-bottom: 0.35rem; font-size: 0.14rem; border-radius: 0.11rem; background: #46c5fc; text-align: center; line-height: 0.4rem; color: #fff;
	}
	.weui-cells:before{
		border-top: none !important;
	}
	.weui-cells:after{
		border-bottom: none !important;
	}
	
	.carsouel{
		background-color: #fbfaf8;
	}
	.carsouel img{
		width: 1.05rem; height: 0.7rem; margin-top: 0.6rem;
	}
	.carsouel .vux-swiper-item{
		text-align: center;
	}
	.carsouel .vux-indicator i{
		width: 0.1rem; height: 0.1rem; border: 0.02rem solid #aaa; border-radius: 0.1rem !important; background: #fff !important;
	}
	.carsouel .vux-indicator .active{
		background: #57524c !important; border: 0.02rem solid #57524c;
	}
</style>